import { defineComponent, toRefs, withKeys } from 'vue'
import styles from './index.module.scss'
import { NInput, NButton, NForm, NFormItem, useMessage } from 'naive-ui'
import { useForm } from './use-form'
import { useLogin } from './use-login'
import { useLocalesStore } from '@/store/locales/locales'
import { useThemeStore } from '@/store/theme/theme'
import cookies from 'js-cookie'
import { useI18n } from 'vue-i18n'

const login = defineComponent({
  name: 'login',
  setup() {
    window.$message = useMessage()
    window.$t = useI18n().t

    const { state } = useForm()
    // const { handleChange } = useTranslate(locale)
    const { handleLogin } = useLogin(state)
    const localesStore = useLocalesStore()
    const themeStore = useThemeStore()

    if (themeStore.getTheme) {
      themeStore.setDarkTheme()
    }

    cookies.set('language', localesStore.getLocales, { path: '/' })

    return { handleLogin, ...toRefs(state), localesStore }
  },
  render() {
    return (
      <div class={styles.container}>
        {/* 国际化开关暂时没用， */}
        {/* <div class={styles['language-switch']}>
          <NSwitch
            onUpdateValue={this.handleChange}
            default-value={this.localesStore.getLocales}
            checked-value='en_US'
            unchecked-value='zh_CN'
          >
            {{
              checked: () => 'en_US',
              unchecked: () => 'zh_CN'
            }}
          </NSwitch>
        </div> */}
        <div class={styles['login-model']}>
          <div class={styles.logo}>
            <h1>{window.$t('login.title')}</h1>
          </div>
          <div class={styles['form-model']}>
            <NForm rules={this.rules} ref='loginFormRef'>
              <NFormItem path='username'>
                <NInput
                  class='input-username'
                  type='text'
                  size='large'
                  v-model={[this.loginForm.username, 'value']}
                  placeholder={window.$t('login.usernameTips')}
                  autofocus
                  onKeydown={withKeys(this.handleLogin, ['enter'])}
                />
              </NFormItem>
              <NFormItem path='password'>
                <NInput
                  class='input-password'
                  type='password'
                  size='large'
                  v-model={[this.loginForm.password, 'value']}
                  placeholder={window.$t('login.userPasswordTips')}
                  onKeydown={withKeys(this.handleLogin, ['enter'])}
                />
              </NFormItem>
            </NForm>
            <NButton
              class={styles['btn-login']}
              round
              type='info'
              disabled={!this.loginForm.username || !this.loginForm.password}
              style={{ width: '100%' }}
              onClick={this.handleLogin}
            >
              {window.$t('login.login')}
            </NButton>
          </div>
        </div>
      </div>
    )
  }
})

export default login
